<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="${path}/plugins/bootstrap-3.3.7-dist/css/bootstrap.css">
    <title>商品列表</title>


    <style>
        #zly{
            width: 50px;
            height: 50px;

            /* 设置边框为圆形 */
            border-radius: 50%;
        }
        #font-color{
            color: white;
            background-color:rgb(34, 33, 33);

        }   
        #log-ss{
            top:0px;
            width: 0%;
        }
        #BS a:hover{
                color: red;
        }
    </style>

</head>
<body>
        <!-- 导航begin -->
        <%@ include file="../common/nav.jsp" %>
        <!-- 导航end -->
<div class="container-fluid" style="padding: 0px; margin: 0px;" >
    <ul class="breadcrumb" style="font-size: 16px; margin-bottom: 0px;">
        <li><a href="#">商城首页</a></li>
        <li style="padding: 0 10px;"><a href="#" style="padding-left: 10px;">搜索结果</a></li>
    </ul>
</div>
<div class="container-fluid" style="padding-top: 0px;">
    <div role="tabpanel" class="tab-pane active" id="tab1">
        <div class="row" style="margin-top: 20px;">
            <c:forEach items="${phones}" var="b">
                <div class="col-sm-4 col-md-4">
                    <div class="thumbnail" style="border: 0px;">
                        <a href="${path}/Detailed"><img src="${path}/imgs/${b.imgUrl}"
                                                        alt="通用的占位符缩略图"></a>
                        <div class="caption" >
                            <p style="font-size: 20px; color:red;text-align: center;">￥${b.price}.00</p><br>
                            <p style="font-size: 20px; text-align:center;">${b.phoneName}</p>

                        </div>
                    </div>
                </div>
            </c:forEach>

        </div>
        <ul class="pagination" style="margin-left: 800px;margin-bottom: 0px; margin-top: 20px;">
            <li><a href="#">&laquo;</a></li>
            <li><a href="#">1</a></li>
            <li ><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#">&raquo;</a></li>
        </ul>
    </div>
</div>



        <script src="${path}/plugins/jquery/jquery.min.js"></script>
        <script src="${path}/plugins/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
        <script>
            $('#myCarousel').carousel({
                interval: 2000
            })
        </script>
        <%@ include file="../common/footer.jsp" %>


</body>
</html>